<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		
		h1{
/*			margin-bottom: 50px;*/
/*			margin: 0 0 50px 0 ;*/
/*			上 右 下 左*/
/*			margin: 50px 0;*/
/*			上下     左右*/
/*			margin: 50px;*/
/*			上下左右*/
/*			margin: 0 50px 0;*/
		}
		.one{

			width: 200px;
			height: 200px;
			background-color: orange;
/*			padding-left: 30px;*/
			padding: 30px 0;
/*			上 右 下 左*/
/*			border: 5px	inset red;*/
/*			solid 实线
			dotted 点状线
			dashed 虚线
			double 双边框线
			outset 突出边框
			inset 内嵌边框*/
			border-top: 5px solid #555555;
			border-bottom: 5px solid blue;
			margin: 0 auto;
/*			auto 自动计算 上下不行 只能左右可以自动计算*/
		}
		.two{
			width: 50px;
			height: 50px;
			background-color: blue;
			margin: 0 auto;
/*			想让哪个块元素居中 就给谁加 margin 0 aoto*/
/*			如果想让文本居中包括图片 ， 那么需要给文本和图片所在的容器(块元素)添加text-aligh*/
		}


	</style>
</head>
<body>

	<h1>我是标题</h1>
	<div class="one">
		<div class="two"></div>
	</div>

</body>
</html>